<template>
    <div id="message-container">
       <van-nav-bar title="消息" fixed safe-area-inset-top z-index="1"/>
       <van-cell-group class="info-list">
        <van-cell>
          <div class="cell-container">
              <img src="~@/assets/login/lgin_qq.png" alt="">
              <div class="cell-text-container">
                <div class="cell-text-info">
                  <p class="cell-title">开团</p>
                  <p class="cell-time">09:03</p> 
                </div>
                <p class="cell-subtitle">美肌护肤品开团啦，快来参加吧~</p>
              </div>
          </div>
        </van-cell>
           <van-cell title="单元格" value="内容" label="描述内容"/>
       </van-cell-group>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list:[],
                loading:false,
                finished:false
            }
        },
        methods:{
            onLoad(){
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                        
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }

                }, 1000);
            },
            onRefresh(){

            }
        }
    }
</script>

<style lang="less" scoped>

#message-container{
    .info-list {
        margin-top: 7vh;
    }
    .cell-container{
        display: flex;
        align-items: center;
        height: 82.5px;
        img {
            width: 10vw;
            height: 10vw;
            flex-grow: 0;
        }
        .cell-text-container{
            margin-left: 2vw;
            flex-grow: 1;
            display:flex;
            flex-direction:column;
            .cell-text-info{
                display: flex;
                flex-direction: row;
                .cell-title {
                    color: rgb(51, 51, 51);
                    font-weight: bold;
                    font-size: 17px;
                    flex-grow: 1;
                
                }
                .cell-time{
                    flex-grow: 0;
                    color: rgb(204, 204, 204);
                    font-size: 14px;
                }
            }
            .cell-subtitle{
                color: rgb(128, 128, 128);
            }
        }
    }

}



</style>